<template>
	<view class="">
		<headerinfo></headerinfo>
		<view class="width60">
			<view class="soulInfo friend_Page">
				<view class="header">
					<i class="iconfont" @click="backPage">&#xe624;</i>
					<view class="userInfo">
						<!-- <image class="touxiang" :src="detailData.momentUserRsp.avatar" mode="aspectFill"></image>	 -->
						<image class="touxiang" :src="momentUserRsp.avatar" mode="aspectFill"></image>
						<span>{{momentUserRsp.nickname}}</span>
						<span class="btns" @click.stop="shoucang()"
							v-if="myusername!=momentUserRsp.username">{{focused ?'已关注':'关注'}}</span>
					</view>
				</view>

				<view class="textbox">
					<view class="">{{ detailData.title }}</view>
					<view class="">{{ detailData.content }}</view>
				</view>


				<view class="imagelist">
					<image @click="viewImage(index)" v-for="(item,index) in detailData.images" :src="item" :key="index"
						mode="widthFix"></image>
				</view>


				<view class="videoBox" v-if="detailData.videos && detailData.videos.length > 0">
					<video id="videoId" :enable-play-gesture="true" style="width: 100%; height: 550px;;"
						:poster="detailData.posterUrl" :src="detailData.videos[0]" :autoplay="true"></video>
				</view>

				<view class="address" v-if="detailData.location">
					<i class="iconfont">&#xe65e;</i>
					<span>{{detailData.location}}</span>
				</view>


				<!-- <view class="time">
					{{detailData.location}}
				</view> -->


				<view class="containerlist">
					<!-- 评论 -->
					<!-- <view class="s-header"><text class="tit"> 评论</text></view> -->
					<view class="evalution" v-if="detailData.comments && detailData.comments.length > 0">
						<view v-for="(item, index) in detailData.comments" :key="index" class="eva-item">
							<image class="touxiang" v-if="item.avatar" :src="item.avatar" mode="aspectFill"></image>
							<view class="defaultTx" v-else>
								<span>{{ item.username[0] }}</span>
							</view>

							<view class="eva-right">
								<text>{{ item.username }}</text>
								<text class="content">{{ item.content }}</text>
								<span class="date">
									{{ item.dataUpdateTime.substr(5, 11) }}
									<span @click="delcomments(item.docId, index)"
										v-if="username == item.username">删除</span>
									<span @click="callBack(item)">回复</span>
								</span>
								<span class="huifuBox" @click="showHuifuMore(item)"
									v-if="item.children && item.children.length > 0">
									<span>
										{{ item.children.length }} 回复
										<i class="iconfont">&#xe613;</i>
									</span>
								</span>
							</view>
						</view>
					</view>
					<view class="noPinglun" v-else>快来发布第一条评论吧</view>
				</view>

				<view style="height: 300rpx;"></view>
				<!--回复弹窗-->
				<tui-bottom-popup :show="huifuDia" @close="huifuDia = false">
					<view class="backTanBox" v-if="backData.children && backData.children.length > 0">
						<view class="title">
							<i class="iconfont" @click="huifuDia = false">&#xe607;</i>
							{{ backData.children.length }} 条回复
						</view>
						<view class="containerlist" style="border-bottom: 1px solid #efefef;">
							<!-- 评论 -->
							<view class="evalution">
								<view class="eva-item">
									<image class="touxiang" v-if="backData.avatar" :src="backData.avatar"
										mode="aspectFill">
									</image>
									<view class="defaultTx" v-else>
										<span>{{ backData.username[0] }}</span>
									</view>

									<view class="eva-right">
										<text>{{ backData.username }}</text>
										<text class="content">{{ backData.content }}</text>
										<text class="date">{{ backData.dataUpdateTime.substr(5, 11) }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="mainBox">
							<view class="containerlist">
								<!-- 评论 -->
								<view class="backAllName">全部回复</view>
								<view class="evalution">
									<view v-for="(item, index) in backData.children" :key="index" class="eva-item">
										<image class="touxiang" v-if="item.avatar" :src="item.avatar" mode="aspectFill">
										</image>
										<view class="defaultTx" v-else>
											<span>{{ item.username[0] }}</span>
										</view>

										<view class="eva-right">
											<text>{{ item.username }}</text>
											<text class="content">{{ item.content }}</text>
											<text class="date">{{ item.dataUpdateTime.substr(5, 11) }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</tui-bottom-popup>


				<view class="lasybnox" :style="{'bottom':keyboardHeight+'px'}"
					:class="keyboardHeight!=0?'active_bottom':''">

					<view class="backBox" v-if="backUser.username">
						回复：{{ backUser.username }}
						<span @click="clearBack">取消回复</span>
					</view>
					<view class="" style="display: flex;align-items: center;">
						<view class="input">
							<i class="iconfont">&#xe62b;</i>
							<input type="text" v-model="content" @confirm="send" placeholder="说点什么吧" />
						</view>

						<view class="lilist">
							<view class="li" @click.stop="fabulous(detailData)">
								<i class="iconfont" v-if="detailData.myLike" style="color:#25d4d0 ;">&#xe760;</i>
								<i class="iconfont" v-else>&#xe8ab;</i>
								<span>{{detailData.likeCount}}</span>
							</view>
							<view class="li" @click="myFavorite">
								<i class="iconfont" style="color: #25d4d0;" v-if="detailData.myFavorite">&#xe8bc;</i>
								<i class="iconfont" v-else>&#xe62a;</i>
								<span>{{detailData.myFavorite?'已收藏':'收藏'}}</span>
							</view>
							<view class="li">
								<i class="iconfont">&#xe623;</i>
								<span>{{detailData.commentCount}}</span>
							</view>
							<view class="li" @click="toChat()">
								<i class="iconfont">&#xe63e;</i>
								<span>私聊</span>
							</view>
						</view>
					</view>

				</view>

			</view>
		</view>
	</view>

</template>

<script>
	import tuiBottomPopup from '@/components/bottom-popup/bottom-popup';
	export default {
		components: {
			tuiBottomPopup
		},
		data() {
			return {
				myusername: uni.getStorageSync('username') ? uni.getStorageSync('username') : '',
				backData: {},
				huifuDia: false,
				detailData: {
					comments: []
				},
				safeAreaInsets: {},
				keyboardHeight: 0,
				content: '',
				id: '',
				momentUserRsp: {},
				commentArticleForm: {},
				backUser: {},
				focused: false
			};
		},
		onLoad(e) {
			this.momentUserRsp = JSON.parse(e.momentUserRsp)
			this.id = e.id

			if (e.focused == 1) {
				this.focused = true
			} else {
				this.focused = false
			}

			console.log(this.momentUserRsp)
			console.log('123123')
			console.log(this.focused)
			this.getData()
		},
		onShow() {
			const {
				safeAreaInsets
			} = uni.getSystemInfoSync()
			this.safeAreaInsets = safeAreaInsets


			//  监听键盘高度变化
			uni.onKeyboardHeightChange((res) => {
				// 获取系统信息
				if (res.height) {
					let _sysInfo = uni.getSystemInfoSync()
					let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight
					let _diff = res.height - _heightDiff
					this.keyboardHeight = _diff > 0 ? _diff : 0


					//  let deviceBottom= this.safeAreaInsets.bottom;  
					//  this.keyboardHeight = res.height ? (res.height - deviceBottom - deviceBottom) : 0  
				} else {
					this.keyboardHeight = 0
				}
			})
		},
		onReachBottom() {

		},
		methods: {
			//收藏
			myFavorite() {
				let data = {
					favorite: true,
					momentId: this.id
				};
				if (this.detailData.myFavorite) {
					data.favorite = false;
				}
				this.$api2.favoriteUnFavoriteMoment(data).then(res => {
					if (data.favorite) {
						this.$Show.show('收藏成功');
					} else {
						this.$Show.show('取消成功');
					}
					this.detailData.myFavorite = !this.detailData.myFavorite;


					let datass = {
						id: this.id,
						myFavorite: this.detailData.myFavorite,
					}

					uni.setStorageSync('shoucang', datass)

				});
			},
			shoucang() {
				let data = {
					followeeId: this.id,
					focus: true
				}

				if (this.focused) {
					data.focus = false;
				}

				uni.showLoading({
					title: '加载中...'
				});
				this.$api2.followfocus(data).then(res => {
					if (data.focus) {
						this.$Show.show('关注成功');
					} else {
						this.$Show.show('取消成功');
					}

					this.focused = !this.focused;

					let datass = {
						username: this.momentUserRsp.username,
						focused: this.focused,
					}

					uni.setStorageSync('guanzhu', datass)
					uni.hideLoading();

					this.$forceUpdate();
				});
			},
			fabulous(item) {
				let data = {
					like: true,
					momentId: this.id
				};
				if (item.myLike) {
					data.like = false;
				}
				this.$api2.likeUnlikeMoment(data).then(res => {
					if (data.like) {
						this.$Show.show('点赞成功');
						this.detailData.likeCount++;
					} else {
						this.detailData.likeCount--;
					}

					this.detailData.myLike = !this.detailData.myLike;

					let datass = {
						id: this.id,
						likeCount: this.detailData.likeCount,
						myLike: this.detailData.myLike
					}

					uni.setStorageSync('dianzan', datass)
					console.log(this.detailData)
					// this.$set(this.newData,"myLike",!this.newData.myLike)
					this.$forceUpdate();
				});
			},
			toChat() {
				let username = this.detailData.username
				uni.navigateTo({
					url: `/pagesfriend/chat/chat?username=${username}`
				})
			},
			showHuifuMore(data) {
				this.backData = data;
				console.log(this.backData)
				this.huifuDia = true;
			},
			getData() {
				let token = uni.getStorageSync('token')
				let viewMomentFunction = this.$api2.viewShareMoment
				if (token) {
					viewMomentFunction = this.$api2.viewMoment
				}
				viewMomentFunction({
					momentId: this.id
				}).then(res => {
					console.log('详情')
					console.log(res)

					//把评论转成树形结构
					if (res.comments && res.comments.length > 0) {
						res.comments = this.$utils.treeDataTranslate2(res.comments, 'docId', 'replyCommentId');
					} else {
						res.comments = []
					}

					this.detailData = res

				})
			},
			backPage() {
				uni.navigateBack()
			},

			send() {
				if (this.content == '') {
					return this.$Show.show('发布的信息不能为空')
				}

				let data = {
					content: this.content,
					momentId: this.detailData.docId,
					replyCommentId: this.commentArticleForm.replyCommentId

				}
				this.$api2.momentcomment(data).then(res => {


					this.$Show.show('发布成功')
					this.backUser = {};
					this.detailData.comments.push(res)
					this.detailData.comments = this.$utils.treeDataTranslate2(this.detailData.comments, 'docId',
						'replyCommentId');


					console.log(this.detailData.comments)
					this.content = ''
					this.commentArticleForm.replyCommentId = ''

					this.$nextTick(function() {
						setTimeout(() => {
							uni.pageScrollTo({
								scrollTop: 99999,
								duration: 0
							});
						}, 50);
					});
				})
			},
			//回复评论
			callBack(item) {
				console.log(item);
				this.backUser = item;
				this.commentArticleForm.replyCommentId = item.docId;
			},
			clearBack() {
				this.commentArticleForm.replyCommentId = '';
				this.backUser = {};
			},
			showHuifuMore(data) {
				this.backData = data;
				this.huifuDia = true;
			},
			viewImage(index) {
				uni.previewImage({
					urls: this.detailData.images,
					current: index
				})
			},
			delcomments(commentId, index) {
				let data = {
					articleId: this.articleId,
					commentId
				};

				this.$api2.deleteComment(data).then(res => {
					this.$Show.show('删除成功');
					this.detailData.comments.splice(index, 1);
					uni.setStorageSync('needRefresh', 1)
				});

			},
		}
	};
</script>


<style lang="scss" scoped>
	.header {
		background-color: #fff;
		padding: 30rpx 30rpx 30rpx 30rpx;
		display: flex;
		align-items: center;

		.iconfont {
			font-size: 40rpx;
		}
	}

	.btns {
		padding: 13rpx 40rpx;
		border: 1px solid #25d4d0;
		border-radius: 40px;
		color: #25d4d0;
		margin-left: 30rpx;
	}

	.backBox {
		width: 100%;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		color: #9d9d9d;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;

		span {
			margin-left: 30rpx;
		}
	}

	.backTanBox {
		height: 90vh;
		width: 100%;
		overflow-y: scroll;

		.title {
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 1px solid #e7e7e7;
			position: relative;
			font-size: 32rpx;

			.iconfont {
				position: absolute;
				left: 30rpx;
			}
		}
	}

	.soulInfo {

		.address {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			padding: 0 30rpx;
			margin-top: 10rpx;
			color: #25d4d0;

			.iconfont {
				margin-right: 3px;
			}
		}

		.time {
			padding: 0 30rpx;
			font-size: 30rpx;
			margin-top: 30rpx;
			color: #888;
		}

		.textbox {
			padding: 30rpx;
			font-size: 32rpx;
			color: #616161;
		}

		.imagelist {
			image {
				width: 50%;
				height: auto;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				margin-left: 30px;
			}
		}



		.userInfo {
			margin-left: 20rpx;
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-weight: bold;

			.touxiang {
				width: 80rpx;
				height: 80rpx;
				border-radius: 100px;
				margin-right: 20rpx;
			}
		}
	}


	/* 评论 */
	.evalution {
		display: flex;
		flex-direction: column;
		background: #fff;
		padding: 20upx 0;

		.defaultTx {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			border: 1px solid #e3d803;
			background-color: #e3d803;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
		}
	}

	.eva-item {
		display: flex;
		padding: 20upx 30upx;
		position: relative;

		image {
			width: 60upx;
			height: 60upx;
			border-radius: 50px;
			flex-shrink: 0;
			margin-right: 24upx;
		}

		&:after {
			content: '';
			position: absolute;
			left: 30upx;
			bottom: 0;
			right: 0;
			height: 0;
			border-bottom: 1px solid #eee;
			transform: translateY(50%);
		}

		&:last-child:after {
			border: 0;
		}
	}

	.eva-right {
		display: flex;
		flex-direction: column;
		flex: 1;
		font-size: 26upx;
		color: #909399;
		position: relative;

		.content {
			font-size: 28upx;
			color: #333;
			padding-top: 20upx;
		}

		.date {
			margin-top: 20rpx;

			span {
				margin-left: 20rpx;
			}
		}
	}

	.detailDatacontent {
		margin-top: 20rpx;

		.images {
			margin-top: 20rpx;

			image {
				width: 100%;
			}

			.posterUrl {
				width: 100%;
			}
		}
	}

	.noPinglun {
		min-height: 300rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #8b8686;
	}

	.backAllName {
		padding: 0 30rpx;
		padding-top: 20rpx;
		font-size: 34rpx;
	}

	.lasybnox {
		width: 100%;
		height: 180rpx;
		background-color: #fff;
		padding: 20rpx;
		padding-bottom: 30rpx;

		.input {
			display: flex;
			background-color: #f6f6f6;
			align-items: center;
			border-radius: 30px;
			font-size: 30rpx;
			padding: 20rpx 0;
			padding-left: 20rpx;
			width: 80%;

			.iconfont {
				margin-right: 5px;
				color: #bababa;
			}

			span {
				color: #bababa;
			}
		}

		.lilist {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.li {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 100rpx;
				color: #474747;

				.iconfont {
					font-size: 44rpx;
					margin-bottom: 5rpx;
					color: #474747;
				}

				span {
					font-size: 26rpx;
				}
			}
		}
	}

	.active_bottom {
		.input {
			width: 100%;
		}

		.lilist {
			display: none;
		}
	}
</style>